<template>
  <a-form @submit="handleSubmit" :form="form" class="form">
    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="商店">
          <a-select
            showSearch
            :defaultActiveFirstOption="false"
            :showArrow="false"
            :filterOption="false"
            placeholder="请选择商店"
            @search="handleSearch"
            @change="handleChange"
            notFoundContent="null"
            v-decorator="['couponTemplate.shopId', { rules: [{ required: true, message: '请选择商店' }] }]"
          >
            <a-select-option value="10">正在加载</a-select-option>
            <a-select-option v-for="d in shopList" :key="d.id">{{ d.shopName }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
        <a-form-item label="可用范围的类型">
          <a-select
            placeholder="可用范围的类型"
            v-decorator="['couponTemplate.rangeType', { rules: [{ required: true, message: '可用范围的类型' }] }]"
          >
            <a-select-option value="10">所有可用</a-select-option>
            <a-select-option value="20">部分商品可用，或指定商品可用</a-select-option>
            <a-select-option value="21">部分商品不可用，或指定商品可用</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 9, offset: 1 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
        <a-form-item label="指定商品">
          <a-select
            mode="multiple"
            placeholder="指定商品"
            v-decorator="['couponTemplate.rangeValues', { rules: [{ required: false, message: '请指定商品' }] }]"
          >
            <a-select-option value="10">正在加载</a-select-option>
            <a-select-option v-for="d in spuList" :key="d.id">{{ d.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>

    <a-row class="form-row" :gutter="16">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="优惠券类型">
          <a-select
            @change="changeType"
            placeholder="优惠券类型"
            v-decorator="[
              'couponTemplate.preferentialType',
              { rules: [{ required: true, message: '请选择优惠券类型' }] }
            ]"
          >
            <a-select-option value="1">代金券</a-select-option>
            <a-select-option value="2">优惠券</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
        <a-form-item label="起用金额">
          <a-input-number
            :min="0"
            style="width:100%"
            placeholder="输入0不限制，大于0多少金额可用"
            v-decorator="[
              'couponTemplate.priceAvailable',
              { rules: [{ required: true, type: 'number', message: '请输入金额', whitespace: true }] }
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row class="form-row" :gutter="16" v-show="showPrecent">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="折扣上限">
          <a-input-number
            :min="0"
            style="width:100%"
            placeholder="折扣上限"
            v-decorator="[
              'couponTemplate.discountPriceLimit',
              {
                rules: [
                  { required: validDiscountPriceLimit, type: 'number', message: '请输入折扣上限', whitespace: true },
                  {
                    validator: checkDiscountPriceLimit //自定义的校验函数
                  }
                ]
              }
            ]"
          />
        </a-form-item>
      </a-col>
      <a-col :xl="{ span: 7, offset: 1 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
        <a-form-item label="折扣百分比">
          <a-input-number
            :min="0"
            :max="100"
            style="width:100%"
            placeholder="折扣百分比"
            :formatter="value => `${value}%`"
            :parser="value => value.replace('%', '')"
            v-decorator="[
              'couponTemplate.percentOff',
              {
                rules: [
                  { required: validPercentOff, type: 'number', max: 100, message: '请输入折扣百分比', whitespace: true }
                ]
              }
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16" v-show="showprice">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item label="优惠金额">
          <a-input-number
            :min="0"
            style="width:100%"
            placeholder="优惠金额"
            v-decorator="[
              'couponTemplate.priceOff',
              {
                rules: [
                  { required: validDiscountPriceLimit, type: 'number', message: '请输入优惠金额', whitespace: true },
                  {
                    validator: checkPriceOff
                  }
                ]
              }
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16" v-show="true">
      <a-col :lg="6" :md="12" :sm="24"></a-col>
    </a-row>

    <a-form-item v-if="showSubmit">
      <a-button htmlType="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'GoodsInfoForm',
  props: {
    showSubmit: {
      default: false
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      shopList: [],
      shopName: '',
      spuList: [],
      showPrecent: false,
      showprice: true,
      validPercentOff: true,
      validDiscountPriceLimit: true,
      validPriceOff: true
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$notification['error']({
            message: 'Received values of form:',
            description: values
          })
        }
      })
    },
    handleSearch(value) {
      let params = { shopName: value + '*' }
      getAction('/shop/web/shopList', params).then(res => {
        if (res.success) {
          this.shopList = res.result.records
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    handleChange(value) {
      let params = { shopId: value }
      getAction('/goodsMain/web/list', params).then(res => {
        if (res.success) {
          this.spuList = res.result.records
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    changeType(value) {
      if (value == 1) {
        this.showprice = true
        this.showPrecent = false
        ;(this.validPercentOff = false), (this.validDiscountPriceLimit = false), (this.validPriceOff = true)
        this.$nextTick(() => {
          this.form.validateFields(['couponTemplate.percentOff'], { force: true })
          this.form.validateFields(['couponTemplate.discountPriceLimit'], { force: true })
          this.form.validateFields(['couponTemplate.priceOff'], { force: true })
        })
      }
      if (value == 2) {
        this.showprice = false
        this.showPrecent = true
        ;(this.validPercentOff = true), (this.validDiscountPriceLimit = true), (this.validPriceOff = false)
        this.$nextTick(() => {
          this.form.validateFields(['couponTemplate.percentOff'], { force: true })
          this.form.validateFields(['couponTemplate.discountPriceLimit'], { force: true })
          this.form.validateFields(['couponTemplate.priceOff'], { force: true })
        })
      }
    },

    checkPriceOff(rule, value, callback) {
      if (
        (this.showprice ==
          true &&this.form.getFieldValue('couponTemplate.priceAvailable')!=undefined&&
          this.form.getFieldValue('couponTemplate.priceAvailable') > 0 &&
          this.form.getFieldValue('couponTemplate.priceAvailable') < this.form.getFieldValue('couponTemplate.priceOff'))
      ) {
        console.log('checkPriceOff')

        callback('优惠金额不能大于起用金额')
      }
    },
    checkDiscountPriceLimit(rule, value, callback) {
      if (
        (this.showPrecent ==
          true &&this.form.getFieldValue('couponTemplate.priceAvailable')!=undefined&&
          this.form.getFieldValue('couponTemplate.priceAvailable') > 0 &&
          this.form.getFieldValue('couponTemplate.priceAvailable') < this.form.getFieldValue('couponTemplate.discountPriceLimit'))
      ) {
        console.log('checkDiscountPriceLimit')

        callback('折扣上限金额不能大于起用金额')
      }
    }
  }
}
</script>

<style scoped></style>
